<template>
  <div>
      <div ref="areaDiv" style="display: block; height: 100px;width:100px;background-color: aquamarine;" @contextmenu="showMenu">右击弹出菜单</div>
      <JContexMenu ref="contextMenu" :menus="menus"></JContexMenu>
  </div>
</template>

<script>
import JContexMenu from './JContextMenu.vue'
export default {
  data(){
    return{
      menus:[
        {
          name:'打开',
          iconHtml:'<svg width="20px" height="20px"><rect  width="100" height="100" fill="#0078d4" /><svg>',
          handler:()=>{
            console.log('点击打开！')
          }
        },
        {
          name:'刷新',
          iconHtml:'<div style="width:20px;height:20px;border-radius:10px;background:#ff8c00"></div>',
          handler:()=>{
            console.log('点击刷新！')
          }
        },
      ]
    }
  },
  components:{
    JContexMenu
  },
  methods:{
    showMenu(event){
      this.$refs.contextMenu.show(event);
      event.preventDefault();      
    }
  }
}
</script>

<style>

</style>